<template>

  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="account">平台统计</el-breadcrumb-item>

        <el-breadcrumb-item>团队经理管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <!--顶部-->
        <el-row style="padding-bottom: 10px;text-align: left">
          <el-input placeholder="名称或手机号" v-model="selectkey" class="input-with-select" style="width: 200px">
          </el-input>
          <el-button type="primary" @click="getStart()">搜索</el-button>

          <el-date-picker
            v-model="dateValue"
            @change="getStart()"
            value-format="timestamp"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <div style="float: right">
            <el-button type="success" icon="el-icon-edit-outline" @click="exportExcel()">导出月收入统计</el-button>
            <el-button type="success" icon="el-icon-edit-outline" @click="exportExcelCZ()">导出扫码并充值用户详情</el-button>
            <el-button type="primary" style="margin-left: 10px" @click="goHref('managerApply',1)" v-if="!account">申请列表</el-button>
            <el-button type="primary" @click="addShow" v-if="!account">新增</el-button>
            <el-button type="danger" @click="deletesel">删除</el-button>
          </div>
        </el-row>

        <!--表格-->
        <el-table
          border
          @selection-change="handleSelectionChange"
          align="left"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            type="selection"
            fixed="left"
            width="35">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            label="性别">
            <template slot-scope="scope">
              {{ scope.row.gender==1?'男':'女'}}
            </template>
          </el-table-column>
          <el-table-column
            label="身份证照片">
            <template slot-scope="scope">
              <el-popover
                v-if="scope.row.img"
                placement="bottom"
                trigger="hover">
                <div style="height: 300px;overflow-y: auto">
                  <img v-for="i in scope.row.img.split(',')" :src="i" alt="" width="300px" style="display: block">
                </div>
                <!--<el-button slot="reference" size="small" type="text">查看图片</el-button>-->
                <img slot="reference" :src="scope.row.img.split(',')[0]" alt="" width="60px" height="60px">
              </el-popover>
              <span v-if="!scope.row.img">无</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号">
          </el-table-column>
          <el-table-column
            label="地推人员">
            <template slot-scope="scope">
              <el-button @click=" goHref ('managerGround',scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="月收入统计">
            <template slot-scope="scope">
              <el-button @click=" goHrefS ('agentIncome','incomeData',{id:scope.row.id,apiM:'monthlyProfitT',apiD:'dayIncomeDetailsT',apiS:'editEndStateT'})">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="扫码用户详情">
            <template slot-scope="scope">
              <el-button  @click=" goHrefS ('agentCode','codeData',{id:scope.row.id,api:'scanRecordT'})">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="扫码并充值用户详情">
            <template slot-scope="scope">
              <el-button  @click=" goHrefS ('agentCharge','chargeData',{type:2,id:scope.row.id,api:'scanAndRechargeListT',apiT:'statisticsT'})">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="120">
            <template slot-scope="scope">
              <el-button @click="editShow(scope.row)" size="small" type="text" v-if="!account">编辑</el-button>
              <el-button @click="changeMes(scope.row.recharge_id,0)" size="small" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" style="margin-top: 15px">
          <el-pagination
            style="text-align: right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataTotal">
          </el-pagination>
        </el-col>
      </el-row>
    </el-row>

    <!--新增-->
    <el-dialog title="新增" :visible.sync="addVisible" width="380px" :modal-append-to-body="false">
      <el-form :model="addData" :rules="addRules" ref="addData" style="text-align: left">
        <el-form-item label="管理员账号" :label-width="formLabelWidth" prop="account">
          <el-input clearable v-model="addData.account" auto-complete="off" placeholder="请输入管理员账号"
                    required></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input clearable v-model="addData.password" auto-complete="off" placeholder="请输入密码"
                    required></el-input>
        </el-form-item>
        <el-form-item label="经理名称" :label-width="formLabelWidth" prop="name">
          <el-input clearable v-model="addData.name" auto-complete="off" placeholder="请输入经理名称"
                    required></el-input>
        </el-form-item>
        <el-form-item label="性别 " :label-width="formLabelWidth" prop="gender">
          <el-select v-model="addData.gender" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input clearable v-model="addData.phone" auto-complete="off" placeholder="请输入手机号"
                    required></el-input>
        </el-form-item>
        <el-form-item label="身份证照片" :label-width="formLabelWidth" prop="img">
          <my-upload @change="uploadChange" @changedel="uploadChangeDel" ref="my_uploadAdd" :multiple="true"></my-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd('addData')">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑-->
    <el-dialog title="编辑" :visible.sync="editVisible" width="380px" :modal-append-to-body="false">
      <el-form :model="editData" :rules="editRules" ref="editData" style="text-align: left">
        <el-form-item label="管理员账号" :label-width="formLabelWidth" prop="account">
          <el-input clearable v-model="editData.account" auto-complete="off" placeholder="请输入管理员账号"
                    required></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" >
          <el-input clearable v-model="editData.password" auto-complete="off" placeholder="请输入密码"
                    required></el-input>
        </el-form-item>
        <el-form-item label="经理名称" :label-width="formLabelWidth" prop="name">
          <el-input clearable v-model="editData.name" auto-complete="off" placeholder="请输入经理名称"
                    required></el-input>
        </el-form-item>
        <el-form-item label="性别 " :label-width="formLabelWidth" prop="gender">
          <el-select v-model="editData.gender" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input clearable v-model="editData.phone" auto-complete="off" placeholder="请输入手机号"
                    required></el-input>
        </el-form-item>
        <el-form-item label="身份证照片" :label-width="formLabelWidth" prop="img">
          <my-upload ref="my_upload" @change=" uploadChangeEdit " @changedel="uploadChangeDelEdit" :multiple="true"></my-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit('editData')">确 定</el-button>
      </div>
    </el-dialog>

    <excel-dao-chu ref="excel"   :my-data="excelData" :my-name="excelName"  :my-title-obj="excelTitleData"></excel-dao-chu>

  </div>
</template>

<script>
  import MyUpload from '../../components/MyUpload'
  import ExcelDaoChu from '../../components/ExcelDaoChu'

  export default {
    name: "ManagerList",
    components: {
      MyUpload,
      ExcelDaoChu

    },
    mounted() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      this.getStart()
    },
    data() {
      return {
        tableData: [],
        pageSize: 10,
        currentPage: 1,
        selectkey: '',
        dataTotal: 0,
        multipleSelection: [],
        formLabelWidth: '100px',
        addVisible: false,
        addData: {},
        addRules: {
          name: {required: true, message: '必填', trigger: 'blur'},
          phone: {required: true, message: '必填', trigger: 'blur'},
          account: {required: true, message: '必填', trigger: 'blur'},
          password: {required: true, message: '必填', trigger: 'blur'},
          gender: {required: true, message: '必选', trigger: 'blur'},
          img: {required: true, message: '请上传图片', trigger: 'blur'},
        },
        editVisible: false,
        editData: {},
        editRules: {
          name: {required: true, message: '必填', trigger: 'blur'},
          phone: {required: true, message: '必填', trigger: 'blur'},
          account: {required: true, message: '必填', trigger: 'blur'},
          password: {required: true, message: '必填', trigger: 'blur'},
          gender: {required: true, message: '必选', trigger: 'blur'},
          img: {required: true, message: '请上传图片', trigger: 'blur'},
        },
        dateValue:[
          (new Date(new Date(new Date().toLocaleDateString()).getTime())-1000 * 60 * 60 * 24*(new Date().getDate()-1)),
          new Date()
        ],
        excelData:[],
        excelTitleData:{},
        excelName:''

      }
    },
    computed: {
      account(){
        return this.$store.state.login.account
      },
    },
    methods: {
      // 获取数据
      getStart() {
        let thi = this
        const por = {
          page: thi.currentPage,
          pageSize: thi.pageSize,
          key: thi.selectkey,
          start_time:~~(thi.dateValue[0]/1000),
          over_time:~~(thi.dateValue[1]/1000)
        }
        thi.mySelectAll('teamList', por).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      // Excel导出
      exportExcel(){
        let thi= this
        const por={
          start_time:~~(thi.dateValue[0]/1000),
          over_time:~~(thi.dateValue[1]/1000)
        }
        thi.mySelect('exportDayIncomeDetailsT',por).then(function (data) {
          thi.excelData=data
          thi.excelTitleData={date:'日期',sum_money:'获得金额',sum_number:'推广人数',name:'推广人姓名',end_state:'完结状态'}
          thi.excelName='月收入统计'
          thi.$refs.excel.sureExcel()
        })
      },
      // Excel导出
      exportExcelCZ(){
        let thi= this
        const por={
          start_time:~~(thi.dateValue[0]/1000),
          over_time:~~(thi.dateValue[1]/1000)
        }
        thi.mySelect('exportScanAndRechargeListT',por).then(function (data) {
          thi.excelData=data
          thi.excelTitleData={orderno:'订单号',price:'充值金额',pay_time:'充值时间',nickname:'用户昵称',phone:'用户手机号',sum_number:'推广总人数',sum_money:'充值总金额'}
          thi.excelName='扫码并充值用户信息'
          thi.$refs.excel.sureExcel()
        })
      },
      // 显示新增
      addShow() {
        this.addData = {img:[]}
        this.addVisible = true
        this.$nextTick(function () {
          this.$refs.my_uploadAdd.medioData = []
        })

      },
      //提交新增
      submitAdd(formName) {
        let thi = this
        thi.$refs[formName].validate((valid) => {
          if (valid) {
            thi.mySubmit('addTeam', thi.addData).then(function (code) {
              thi.addVisible = false
              thi.getStart()
            })
          } else {
            return false;
          }
        });
      },
      //显示编辑
      editShow(row) {
        this.editVisible = true
        this.editData = JSON.parse(JSON.stringify(row))
        this.editData.picture = row.img.split(',') //多张图片时开启
        this.$nextTick(function () {
          this.$refs.my_upload.medioData = row.img.split(',')
        })
      },
      //提交编辑
      submitEdit(formName) {
        let thi = this
        thi.$refs[formName].validate((valid) => {
          if (valid) {
            thi.mySubmit('editTeam', thi.editData).then(function (code) {
              if (code == 200) {
                thi.editVisible = false
              }
            })
          } else {
            return false;
          }
        });
      },
      //图片上传完成的钩子
      uploadChange(data) {
        // this.addData.imgurl = data.data.filePath; //单张
        console.log(data)
        this.addData.img.push(data);//多张

      },
//图片删除钩子
      uploadChangeDel(index) {
        this.addData.img.splice(index, 1);//多张图片
        // this.addData.imgurl = ''//单张图片

      },
//图片编辑上传完成的钩子
      uploadChangeEdit(data) {
        // this.editData.img = data.data.filePath; //单张
        this.editData.img.push(data.data.picture);//多张
      },

//图片编辑删除钩子
      uploadChangeDelEdit(index) {
        this.editData.img.splice(index, 1);//多张图片
        // this.editData.imgurl = ''//单张图片

      },

      //状态改变提示
      changeMes(id, state) {
        var heeh = '该'
        var caozuo = '禁用'
        if (id.length > 1) {
          heeh = '这些'
        }
        if (state == 0) {
          caozuo = '删除'
        }
        let thi = this
        thi.$confirm('此操作将' + caozuo + heeh + '信息', '是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          thi.submitState(id, state)
        }).catch(() => {
          thi.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //状态改变
      submitState(id, state) {
        let thi = this
        const por = {
          id: id,
          state: 0
        }
        thi.mySubmit('editStateT', por).then(function (code) {
          if (code == 200) {
            thi.getStart()
          }
        })
      },
      //多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //批量状态改变合并ID
      deletesel() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择要删除的分类!'
          });
          return
        } else {
          var ids = '';
          this.multipleSelection.forEach(function (avalue, aindex, aarr) {
            if (aindex == 0) {
              ids = avalue.recharge_id
            } else {
              ids = ids + ',' + avalue.recharge_id
            }
          });
          this.changeMes(ids, 0)
        }
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getStart()
      },
      //跳转页面
      handleCurrentChange(val) {
        this.currentPage = val
        this.getStart()
      },
    }
  }
</script>

<style scoped>
  .admin-body {
    width: 100%;
  }

  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
</style>
